<script setup>
	defineProps({
		title:{
			required:true,
			type:String
		}
	})
</script>


<template>
	<el-card class="page-container">
		<template #header>
			<div class="header">
				<!-- 不希望写死，从父亲哪里获取 -->
				<span>{{title}}</span>
				<div class="extra">
					<!-- 不希望写死 -->
					<slot name="extra"></slot>
					<!-- <el-button type="primary">添加分类</el-button> -->
				</div>
			</div>
		</template>
		
		<!-- 不希望写死的部分使用slot -->
		<slot></slot>
		<!-- <div>内容部分</div>
		<div>内容部分</div>
		<div>内容部分</div>
		<div>内容部分</div> -->
	</el-card>
</template>


<style lang="scss" scoped>
	.page-container {
		min-height: 100%;
		box-sizing: border-box;
	}
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	// display: flex: 这使得 .header 元素成为一个 flex 容器，使得其中的子元素（比如 logo、导航、搜索框等）能够以弹性布局的方式排列。

//justify-content: space-between: 这条规则决定了子元素沿主轴（默认是水平方向）如何排列。space-between 会将第一个子元素对齐到容器的起始位置，最后一个子元素对齐到容器的结束位置，其他的子元素会均匀分布在它们之间。常用于导航栏或页头布局，确保元素之间有一定的间距。

//align-items: center: 这条规则控制子元素在交叉轴（默认是垂直方向）上的对齐方式。center 会让子元素在容器中垂直居中对齐。
	
</style>